<template>
	<view class="page">
		<view class="title">
			3.8.v-for列表渲染的用法
		</view>
		<view class="p">
			官网链接API
			<uni-link href="https://cn.vuejs.org/guide/essentials/list.html" text="v-for 列表渲染"
				color="#007BFF"></uni-link>
		</view>
		<view class="p">
			使用方法很简答 v-for="(任意一个对象名称,index) in 变量或者数值" ,后面则紧跟 ：key="任意对象中的某个唯一值"
		</view>
		<view class="grid" style="gap: 12rpx;">
			<view class="box" v-for="(av,index) in avstars">
				<view class="flex">
					<image :src="av.avatar" class="img" mode="widthFix"
						:style="{width:'120rpx',borderRadius:'50%',marginRight:'12rpx'}">
					</image>
					<view class=" item">
						<view class="name p">
							{{av.name}}
						</view>
						<view class="age p">
							年龄：{{av.age}}
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const avstars = ref([{
		name: "桃乃香奈",
		age: "28",
		avatar: "https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/av1.jpg"
	}, {
		name: "鈴乃ウト",
		age: "18",
		avatar: "https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/av2.jpg"
	}, {
		name: "三上悠亜",
		age: "21",
		avatar: "https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/av3.jpg"
	}, {
		name: "七澤美亞",
		age: "20",
		avatar: "https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/av4.jpg"
	}])
</script>

<style lang="scss" scoped>

</style>